<template>
	<view class="wrapper">
		<RTitle title="添加地址" url="/pages/runErrands/confirm"/>
		<view class="m-wrapper">
			<view class="line m-addr-wrap" @click="openMap">
				<view class="address-box ellipsis">
					<text v-if="address && address.adress">{{ address.adress }}</text>
					<text v-else>请选择小区/大厦/标志建筑</text>
				</view>
				<view class="m-addr-icon"></view>
				<!-- <text class="icon-dingwei5 iconfont"></text> -->
			</view>
			<view class="line"><input class="detail" type="text" placeholder="请补充详细地址" :value="detail" @blur="inputBlur" data-name="detail"/></view>
			<view class="line">
				<view class="user-box"><input class="input-text" type="text" placeholder="联系人" :value="name" @blur="inputBlur" data-name="name"/></view>
				<view class="phone-box">
					<input class="input-text" type="text" placeholder="手机号" :value="phone" @focus="inputPhone" @input="inputPhone" @blur="inputBlur" data-name="phone"/>
					<view class="phone-list" v-if="showPhoneList && phoneList.length > 0">
						<view class="item" v-for="(item, index) in phoneList" :key="index" @click="selectPhone(item)">{{ item }}</view>
					</view>
				</view>
			</view>
			<view class="line mb10">
				<view class="sex-select" :class="sex == 1 ? 'active' : ''" @click="selectSex(1)">
					<text class="icon-quan iconfont no"></text>
					<text class="icon-gou iconfont yes"></text>
					<text>先生</text>
				</view>
				<view class="sex-select" :class="sex == 2 ? 'active' : ''" @click="selectSex(2)">
					<text class="icon-quan iconfont no"></text>
					<text class="icon-gou iconfont yes"></text>
					<text>女士</text>
				</view>
			</view>
		</view>
		<view class="m-wrapper m20">
			<view class="line">
				<view class="save-select" :class="{ active: isSave }" @click="selectSave">
					<text class="icon-fangkuang2 iconfont no"></text>
					<text class="icon-gouxuan1 iconfont yes"></text>
					<text>保存到地址簿</text>
				</view>
			</view>
		</view>

		<view class="confirm"><button class="btn" @click="confirm">确定</button></view>
	</view>
</template>

<script>
import RTitle from './components/r-title.vue'
import common from '../../utils/common.js'
var app = getApp()
var _this
export default {
	name: 'addAddress',
	components:{
		RTitle
	},
	data() {
		return {
			address: '',
			detail: '',
			name: '',
			phone: '',
			phoneList: [],
			showPhoneList: false,
			isSelectPhone: false,
			sex: 1, // 1先生 2女士
			isSave: app.globalData.isSaveAddressDic == undefined?true:app.globalData.isSaveAddressDic, // 是否选择了保存到地址簿按钮
			addressId: 0, // 地址ID
			back: 1, // 返回几层页面
		};
	},
	onLoad (options) {
		_this = this
		console.log('地址页初始化', options)
		_this.back = options.back
		this.getPhoneList();
		
		console.log('地址页初始化', this.address)
		
		// #ifdef H5
		if (common.$checkPlat.checkIos()) {
			window.addEventListener('pageshow', this.getMapAddress())
		}
		// #endif
	},
	onShow () {
		let addressInput = app.globalData.addressInput;
		if (addressInput) {
			this.detail = addressInput.detail;
			this.name = addressInput.name;
			this.phone = addressInput.phone;
			this.sex = addressInput.sex > 0 ? addressInput.sex : 1;
			this.addressId = addressInput.adress_id;
			this.address = addressInput;
		}
		
		if (app.globalData.myMapAddress) {
			this.address = app.globalData.myMapAddress;
		}
		console.log('地址页onShow',this.address )
	},
	onUnload () {
		app.globalData.myMapAddress = ''
		
		// #ifdef H5
		if (common.$checkPlat.checkIos()) {
			window.removeEventListener('pageshow', this.getMapAddress())
		}
		// #endif
	},
	methods: {
		getMapAddress () {
			if (app.globalData.mapAddress) {
				this.address = app.globalData.mapAddress;
				console.log('地址页getMapAddress',this.address )
			}
		},
		
		// 点击确定按钮
		confirm() {
			console.log('111点击确定', this.address, this.detail, this.name, this.phone)
			var errorMsg = '';
			if (this.address == '') {
				errorMsg = common.changeTxt('请选择位置')
			} else if (this.detail == '') {
				console.log('333点击确定')
				errorMsg = common.changeTxt('请填写详细地址')
			} else if (this.name == '') {
				console.log('444点击确定')
				errorMsg = common.changeTxt('请填写联系人')
			} else if (this.phone == '') {
				console.log('555点击确定')
				errorMsg = common.changeTxt('请填写联系电话')
			} else if(!/^1\d{10}$/.test(this.phone)){
				errorMsg = common.changeTxt('联系电话格式不正确')
			}
			if (errorMsg != '') {
				uni.showModal({
					title: common.changeTxt('提示'),
					content: errorMsg,
					showCancel: false
				})
				return;
			}
			this.address.adress = this.address.adress
			this.address.detail = this.detail;
			this.address.name = this.name;
			this.address.phone = this.phone;
			this.address.sex = this.sex;
			app.globalData[app.globalData.addressType] = this.address;
			app.globalData.addressInput = '';
			app.globalData.mapAddress = '';
			_this.$forceUpdate()
			console.log('222点击确定')
			if (this.isSave) {
				this.saveAddress();
			} else {
				common.navigateBack(this.back-0)
			}
		},
		saveAddress() {
			// #ifdef H5
				let param = {
					adress: this.address.adress,
					detail: this.detail,
					name: this.name,
					latitude: this.address.lat,
					longitude: this.address.lng,
					sex: this.sex,
					phone: this.phone,
					adress_id: this.addressId
				};
				common.post('My&a=edit_adress', param, (res) => {
					console.log('保存地址成功', res);
					common.navigateBack(this.back*1)
				})
			// #endif

			// #ifdef MP-WEIXIN || MP-ALIPAY
				common.changeLocation((data) => {
					console.log('gcj02坐标转为百度坐标', data, _this.address)
					let param = {
						adress: _this.address.adress,
						detail: _this.detail,
						name: _this.name,
						latitude: data.lat,
						longitude: data.lng,
						sex: _this.sex,
						phone: _this.phone,
						adress_id: _this.addressId
					};
					common.post('My&a=edit_adress', param, (res) => {
						console.log('保存地址成功', res);
						common.navigateBack(_this.back*1)
					})
				}, _this,  this.address.longitude, this.address.latitude, 'gcj02')		
			// #endif
		},
		// 获取地址列表，提取手机号列表
		getPhoneList() {
			common.post('paotui&c=My&a=adress', {longlatType: 'gcj02', plugin: true}, (res) => {
				let phoneList = res.map(item => item.phone);
				let arr = [];
				for (var i = 0; i < phoneList.length; i++) {
					if (arr.indexOf(phoneList[i]) == -1) {
						arr.push(phoneList[i]);
					}
				}
				this.phoneList = arr;
				console.log('获取电话列表', arr, res)
			})
		},
		// 跳转地图页面选择地址
		openMap() {
			// #ifdef H5
			let url = '/pages/my/openMap?location_type=gcj02'
			if (this.address) {
				url = url + '&coordtype=baidu&coord=' + this.address.lat + ',' + this.address.lng
			}
			uni.navigateTo({ url })
			// #endif
			
			// #ifdef MP-WEIXIN || MP-ALIPAY
			uni.chooseLocation({
				type: 'gcj02',
				success: function(res) {
					console.log('选择位置成功', res);
					res.adress = res.name
					res.lng = res.longitude
					res.lat = res.latitude
					app.globalData.mapAddress = _this.address = res
				},
				fail(err) {
					console.log(err);
				}
			});
			// #endif
		},

		// 输入电话
		inputPhone() {
			if (this.phoneTimer) {
				clearTimeout(this.phoneTimer);
			}
			this.showPhoneList = this.phone == '' || this.phone == undefined;
		},

		// 选择电话
		selectPhone(value) {
			this.phone = value;
		},

		inputBlur(e) {
			console.log('输入框输入数据', e)
			let name = e.target.dataset.name
			this[name] = e.target.value
			if (this[name]) {
				this.savePageData();
			}
			
			if (name == '') {
				
			}
			this.phoneTimer = setTimeout(() => {
				this.showPhoneList = false;
			}, 100);
		},

		savePageData() {
			var addressInput = {
				detail: this.detail,
				name: this.name,
				phone: this.phone,
				sex: this.sex,
				addressId: this.addressId
			};
			app.globalData.addressInput = addressInput;
		},

		// 选择性别
		selectSex(value) {
			this.sex = value;
			this.savePageData();
		},

		// 选择保存到地址簿
		selectSave() {
			this.isSave = !this.isSave;
			app.globalData.isSaveAddressDic = this.isSave
		}
	}
};
</script>

<style lang="stylus" scoped>
$theme-color=#00c78c
.m-addr-wrap
	display flex
	align-items center
.m-addr-icon	
	width 42upx
	height 39upx
	background-image url('')
	background-repeat no-repeat
	background-position center
	background-size cover
.m-wrapper
	padding-top 20upx
	background-color #fff
.m20
	margin-top 20upx
.wrapper
	position relative
	height 100%
	.mb10
		margin-bottom 10px
	.ellipsis
		white-space nowrap
		text-overflow ellipsis
		overflow hidden
	#mapPage
		position absolute
		top 0
		left 0
		right 0
		bottom 0
		z-index 99
	.line
		height 50px
		line-height 50px
		background #fff
		font-size 16px
		width 92%
		margin 0 auto
		border-bottom 1PX solid #f4f4f4
		display flex
		.address-box, .detail, .user-box, .phone-box
			flex-grow 1
			height 100%
			.input-text
				height 100%
		.user-box
			padding-right 10px
		.phone-box
			border-left 1PX solid #efefef
			padding-left 10px
			position relative
			.phone-list
				background #fff
				position absolute
				left 0
				right -10px
				box-shadow -2px 3px 5px #ddd
				.item
					border-bottom 1PX solid #efefef
					padding 0 10px
					line-height 40px
					&:last-child
						border-bottom none
		.sex-select
			margin-right 30px
			display flex
			align-items center
			.iconfont
				font-size 20px
				margin-right 8px
			.no
				color #999
			.yes
				display none
			&.active
				.no
					display none
				.yes
					display inline-block
					color $theme-color
		.save-select
			color #999
			display flex
			align-items center
			.iconfont
				margin-right 8px
				font-size 16px
			.yes
				display none
				color $theme-color
			&.active
				color #333
				.no
					display none
				.yes
					display inline-block
	.confirm
		margin-top 50px
		text-align center
		.btn
			width 90%
			color #fff
			background $theme-color
			font-size 18px
			line-height 2.4
			border-radius 5px
			&:active
				background darken($theme-color, 10%)
</style>
